<template>
	<!-- 搜索框 -->
	<view class='topbar'>
		<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
			@cancel="cancel" @clear="clear">
		</uni-search-bar>
	</view>

	<!--筛选栏-->
	<view class="filter-bar">
		<!-- 分类筛选 -->
		<view class="filter-item" @click="toggleFilter('category')">
			<text>{{currentCategory}}</text>
			<view class="icon-container">
				<image v-if="showCategoryDropdown && activeFilter === 'category'" src="/static/small/arrow-up.png"
					class="arrow-icon" />
				<image v-else src="/static/small/arrow-down.png" class="arrow-icon" />
			</view>
		</view>

		<!-- 销量排序 -->
		<view class="filter-item" @click="toggleFilter('sales')">
			<text>销量</text>
			<view class="sort-arrows">
				<image src="/static/small/arrow-up.png" class="sort-arrow"
					:style="{opacity: sortTypes.sales === 'asc' ? 1 : 0.3}" />
				<image src="/static/small/arrow-down.png" class="sort-arrow"
					:style="{opacity: sortTypes.sales === 'desc' ? 1 : 0.3}" />
			</view>
		</view>

		<!-- 价格排序 -->
		<view class="filter-item" @click="toggleFilter('price')">
			<text>价格</text>
			<view class="sort-arrows">
				<image src="/static/small/arrow-up.png" class="sort-arrow"
					:style="{opacity: sortTypes.price === 'asc' ? 1 : 0.3}" />
				<image src="/static/small/arrow-down.png" class="sort-arrow"
					:style="{opacity: sortTypes.price === 'desc' ? 1 : 0.3}" />
			</view>
		</view>
	</view>

	<!-- 分类下拉菜单 -->
	<view class="dropdown-menu" v-if="showCategoryDropdown && activeFilter === 'category'">
		<view class="dropdown-item" v-for="item in categories" :key="item.value"
			@click="selectOption('category', item)">
			<text>{{item.label}}</text>
			<image v-if="currentCategory === item.label" src="/static/small/checkmark.png" class="check-icon" />
		</view>
	</view>

	<!-- 销量排序下拉菜单 -->
	<view class="dropdown-menu" v-if="showCategoryDropdown && activeFilter === 'sales'">
		<view class="dropdown-item" @click="selectOption('sales', {label: '销量从低到高', value: 'asc'})">
			<text>销量从低到高</text>
			<image v-if="sortTypes.sales === 'asc'" src="/static/small/checkmark.png" class="check-icon" />
		</view>
		<view class="dropdown-item" @click="selectOption('sales', {label: '销量从高到低', value: 'desc'})">
			<text>销量从高到低</text>
			<image v-if="sortTypes.sales === 'desc'" src="/static/small/checkmark.png" class="check-icon" />
		</view>
	</view>

	<!-- 价格排序下拉菜单 -->
	<view class="dropdown-menu" v-if="showCategoryDropdown && activeFilter === 'price'">
		<view class="dropdown-item" @click="selectOption('price', {label: '价格从高到低', value: 'desc'})">
			<text>价格从高到低</text>
			<image v-if="sortTypes.price === 'desc'" src="/static/small/checkmark.png" class="check-icon" />
		</view>
		<view class="dropdown-item" @click="selectOption('price', {label: '价格从低到高', value: 'asc'})">
			<text>价格从低到高</text>
			<image v-if="sortTypes.price === 'asc'" src="/static/small/checkmark.png" class="check-icon" />
		</view>
	</view>


	<view class="category-nav">
		<view class="category-item" :class="{active: currentTab === 'recommend'}" @click="switchTab('recommend')">
			<text>推荐</text>
		</view>
		<view class="category-item" :class="{active: currentTab === 'cloth'}" @click="switchTab('cloth')">
			<text>台球台</text>
		</view>
		<view class="category-item" :class="{active: currentTab === 'cue'}" @click="switchTab('cue')">
			<text>球杆/皮头</text>
		</view>
		<view class="category-item" :class="{active: currentTab === 'supplies'}" @click="switchTab('supplies')">
			<text>球房</text>
		</view>
		
		<view class="category-item" :class="{active: currentTab === 'other'}" @click="switchTab('other')">
			<text>其他</text>
		</view>
	</view>


	<!-- 商品 -->
	<view v-if="currentTab === 'recommend' && dataLoaded" class="content-container">
		<view class="trade-item" v-for="(item, index) in cityTrades" :key="index" @click="goToDetail(item)">
			<view class="trade-content-wrapper">
				<image :src="getImageUrl(item.image)" mode="aspectFill" class="trade-image"></image>

				<view class="trade-info-container">
					<view class="trade-header">
						<text class="trade-title">{{item.type}}  {{item.brand || ''}} {{item.tag || ''}}</text>
						<view class="trade-tag">
							<text>{{item.city}}</text>
							<text>{{item.price}}元</text>
						</view>
					</view>
					<text class="trade-desc">{{item.description}}</text>
					<text class="trade-info" v-if="item.cond">成色: {{item.cond}}</text>
					<text class="trade-info" v-if="item.year">年份: {{item.year}}</text>
					<text class="trade-contact">联系方式: {{item.contact_phone || '暂无'}}</text>
				</view>
			</view>
		</view>

		<view v-if="cityTrades.length === 0" class="empty-container">
			<text>暂无商品</text>
		</view>
	</view>

	<!-- 台球台 -->
	<view v-if="currentTab === 'cloth' && dataLoaded" class="content-container">
		<view class="trade-item" v-for="(item, index) in clothProducts" :key="index" @click="goToDetail(item)">
			<view class="trade-content-wrapper">
				<image :src="getImageUrl(item.image)" mode="aspectFill" class="trade-image"></image>

				<view class="trade-info-container">
					<view class="trade-header">
						<text class="trade-title">{{item.brand || ''}} {{item.tag || ''}}</text>
						<view class="trade-tag">
							<text>{{item.city}}</text>
							<text>{{item.price}}元</text>
						</view>
					</view>
					<text class="trade-desc">{{item.description}}</text>
					<text class="trade-info" v-if="item.cond">成色: {{item.cond}}</text>
					<text class="trade-info" v-if="item.year">年份: {{item.year}}</text>
					<text class="trade-contact">联系方式: {{item.contact_phone || '暂无'}}</text>
				</view>
			</view>
		</view>

		<view v-if="clothProducts.length === 0" class="empty-container">
			<text>暂无商品</text>
		</view>
	</view>

	<!-- 球房 -->
	<view v-if="currentTab === 'supplies' && dataLoaded" class="content-container">
		<view class="trade-item" v-for="(item, index) in suppliesProducts" :key="index" @click="goToDetail(item)">
			<view class="trade-content-wrapper">
				<image :src="getImageUrl(item.image)" mode="aspectFill" class="trade-image"></image>

				<view class="trade-info-container">
					<view class="trade-header">
						<text class="trade-title">{{item.type}}{{item.brand || ''}} {{item.tag || ''}}</text>
						<view class="trade-tag">
							<text>{{item.city}}</text>
							<text>{{item.price}}元</text>
						</view>
					</view>
					<text class="trade-desc">{{item.description || '高品质耗材'}}</text>
					<text class="trade-info" v-if="item.cond">成色: {{item.cond}}</text>
					<text class="trade-info" v-if="item.year">年份: {{item.year}}</text>
					<text class="trade-contact">联系方式: {{item.contact_phone || '暂无'}}</text>
				</view>
			</view>
		</view>

		<view v-if="suppliesProducts.length === 0" class="empty-container">
			<text>暂无商品</text>
		</view>
	</view>

	<!-- 球杆/皮头类内容 -->
	<view v-if="currentTab === 'cue' && dataLoaded" class="content-container">
		<view class="trade-item" v-for="(item, index) in cueProducts" :key="index" @click="goToDetail(item)">
			<view class="trade-content-wrapper">
				<image :src="getImageUrl(item.image)" mode="aspectFill" class="trade-image"></image>

				<view class="trade-info-container">
					<view class="trade-header">
						<text class="trade-title">{{item.brand || ''}} {{item.tag || ''}}</text>
						<view class="trade-tag">
							<text>{{item.city}}</text>
							<text>{{item.price}}元</text>
						</view>
					</view>
					<text class="trade-desc">{{item.description || '高品质球杆/皮头'}}</text>
					<text class="trade-info" v-if="item.cond">成色: {{item.cond}}</text>
					<text class="trade-info" v-if="item.year">年份: {{item.year}}</text>
					<text class="trade-contact">联系方式: {{item.contact_phone || '暂无'}}</text>
				</view>
			</view>
		</view>

		<view v-if="cueProducts.length === 0" class="empty-container">
			<text>暂无商品</text>
		</view>
	</view>

	<!-- 其他内容 -->
	<view v-if="currentTab === 'other' && dataLoaded" class="content-container">
		<view class="trade-item" v-for="(item, index) in otherProducts" :key="index" @click="goToDetail(item)">
			<view class="trade-content-wrapper">
				<image :src="getImageUrl(item.image)" mode="aspectFill" class="trade-image"></image>

				<view class="trade-info-container">
					<view class="trade-header">
						<text class="trade-title">{{item.type}}{{item.brand || ''}} {{item.tag || ''}}</text>
						<view class="trade-tag">
							<text>{{item.city || '全国'}}</text>
							<text>{{item.price}}元</text>
						</view>
					</view>
					<text class="trade-desc">{{item.description || '其他台球相关商品'}}</text>
					<text class="trade-info" v-if="item.cond">成色: {{item.cond}}</text>
					<text class="trade-info" v-if="item.year">年份: {{item.year}}</text>
					<text class="trade-contact">联系方式: {{item.contact_phone || '暂无'}}</text>
				</view>
			</view>
		</view>

		<view v-if="otherProducts.length === 0" class="empty-container">
			<text>暂无商品</text>
		</view>
	</view>

	<!-- 加载状态提示 -->
	<view v-if="!dataLoaded" class="loading-container">
		<text>加载中...</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				currentCategory: '全部商品',
				showCategoryDropdown: false,
				activeFilter: '',
				sortTypes: {
					sales: '',
					price: ''
				},
				categories: [{
						label: '全部商品',
						value: 'all'
					},
					{
						label: '新款商品',
						value: 'new'
					},
					{
						label: '折扣商品',
						value: 'discount'
					}
				],
				currentTab: 'recommend',
				dataLoaded: false,
				// 各类商品数据
				clothProducts: [],
				suppliesProducts: [],
				cueProducts: [],
				otherProducts: [],
				cityTrades: [],
				// queryParams: {
				// 	city: '北京',
				// 	type: '闲置台球台'
				// },
				
			}
		},
		methods: {
			switchTab(tab) {
				this.currentTab = tab;
				switch (tab) {
					case 'recommend':
						this.getCityTrades();
						break;
					case 'cloth':
						this.getClothProducts();
						break;
					case 'supplies':
						this.getSuppliesProducts();
						break;
					case 'cue':
						this.getCueProducts();
						break;
					case 'other':
						this.getOtherProducts();
						break;
				}
			},
			getCityTrades() {
				this.token = uni.getStorageSync('token');
				this.$http.get("https://billiards.cqtrust.cn/local_trades")
					.then((res) => {
						console.log(res);
						const {
							code,
							msg,
							data
						} = res;
						uni.showToast({
							title: msg,
							icon: 'none'
						});
						if (code === 1 || code === 200) {
							if (data && data.length > 0) {
								this.cityTrades = data;
								console.log(data);



							}
							return Promise.resolve(true);
						}
						return Promise.reject(false);
					})
					.catch((res) => {
						console.log(res);
						return Promise.reject(false);
					});
			},
			getClothProducts() {
				this.token = uni.getStorageSync('token');
				this.$http.get("https://billiards.cqtrust.cn/local_trades", {
				        
						type: '闲置台球台'
						// city: this.queryParams.city,
						// type: this.queryParams.type

					})
					.then((res) => {
						console.log(res);
						const {
							code,
							msg,
							data
						} = res;
						uni.showToast({
							title: msg,
							icon: 'none'
						});
						if (code === 1 || code === 200) {
							if (data && data.length > 0) {
								this.clothProducts = data;
								console.log(data);



							}
							return Promise.resolve(true);
						}
						return Promise.reject(false);
					})
					.catch((res) => {
						console.log(res);
						return Promise.reject(false);
					});
			},
			getSuppliesProducts() {
				this.token = uni.getStorageSync('token');
				this.$http.get("https://billiards.cqtrust.cn/local_trades", {
						type: '球房转让'
						// city: this.queryParams.city,
						// type: this.queryParams.type

					})
					.then((res) => {
						console.log(res);
						const {
							code,
							msg,
							data
						} = res;
						uni.showToast({
							title: msg,
							icon: 'none'
						});
						if (code === 1 || code === 200) {
							if (data && data.length > 0) {
								this.suppliesProducts = data;
								console.log(data);



							}
							return Promise.resolve(true);
						}
						return Promise.reject(false);
					})
					.catch((res) => {
						console.log(res);
						return Promise.reject(false);
					});
			},
			getCueProducts() {
				this.token = uni.getStorageSync('token');
				this.$http.get("https://billiards.cqtrust.cn/local_trades", {

						// params: {
						type: '闲置球杆'
						// }
						// city: this.queryParams.city,
						// type: this.queryParams.type

					})
					.then((res) => {
						console.log(res);
						const {
							code,
							msg,
							data
						} = res;
						uni.showToast({
							title: msg,
							icon: 'none'
						});
						if (code === 1 || code === 200) {
							if (data && data.length > 0) {
								this.cueProducts = data;
								console.log(data);



							}
							return Promise.resolve(true);
						}
						return Promise.reject(false);
					})
					.catch((res) => {
						console.log(res);
						return Promise.reject(false);
					});
			},
			getOtherProducts() {
				this.token = uni.getStorageSync('token');

				
				this.$http.get("https://billiards.cqtrust.cn/local_trades", {
					type: '求购设备'

					})
					.then((res) => {
						console.log(res);
						const {
							code,
							msg,
							data
						} = res;
						uni.showToast({
							title: msg,
							icon: 'none'
						});
						if (code === 1 || code === 200) {
							if (data && data.length > 0) {
								this.otherProducts = data;
								console.log(data);



							}
							return Promise.resolve(true);
						}
						return Promise.reject(false);
					})
					.catch((res) => {
						console.log(res);
						return Promise.reject(false);
					});
			},

			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},

			// 失去焦点时的处理逻辑
			blur() {
				console.log('搜索框失去焦点');
			},

			// 获得焦点时的处理逻辑
			focus() {
				console.log('搜索框获得焦点');
			},
			input(e) {
				console.log('输入内容:', e.value);
				this.searchValue = e.value;
			},
			cancel() {
				console.log('取消搜索');
				this.searchValue = '';
			},
			clear() {
				console.log('清除搜索内容');
				this.searchValue = '';
			},

			toggleFilter(type) {
				if (this.activeFilter === type && this.showCategoryDropdown) {
					this.showCategoryDropdown = false;
				} else {
					this.activeFilter = type;
					this.showCategoryDropdown = true;
				}
			},

			selectOption(type, option) {
				this.showCategoryDropdown = false;

				if (type === 'category') {
					this.currentCategory = option.label;
					this.$emit('filter-change', {
						type: 'category',
						value: option.value
					});
				} else if (type === 'sales' || type === 'price') {
					// 如果点击的是当前已选中的排序方式，则取消排序
					if (this.sortTypes[type] === option.value) {
						this.sortTypes[type] = '';
					} else {
						this.sortTypes[type] = option.value;
					}
					// 触发排序事件，传递所有排序条件
					this.$emit('sort-change', {
						sales: this.sortTypes.sales,
						price: this.sortTypes.price
					});
				}
			},




			// 处理图片URL
			getImageUrl(imagePath) {
				if (!imagePath) return '/static/renwu/taiqiu.png';

				if (imagePath.startsWith('http')) return imagePath;

				return `https://billiards.cqtrust.cn${imagePath}`;
			},

			goToDetail(item) {
				uni.navigateTo({
					url: `/pages/goods/jiemian/index?id=${item.id}`,
					success: () => {
						uni.setStorageSync('currentProduct', item);
					}
				});
			},

			loadData() {
				// 模拟API调用
				uni.showLoading({
					title: '加载中...'
				});

				// 模拟API请求延迟
				setTimeout(() => {
					// 模拟获取到的数据
					this.clothProducts = [{
							image: '/static/products/cloth1.jpg',
							name: '专业台尼布',
							price: '380'
						},
						{
							image: '/static/products/cloth2.jpg',
							name: '进口台尼',
							price: '580'
						}
					];

					this.suppliesProducts = [{
							image: '/static/products/supply1.jpg',
							name: '台球粉',
							price: '15'
						},
						{
							image: '/static/products/supply2.jpg',
							name: '三角架',
							price: '25'
						}
					];

					this.cueProducts = [{
							image: '/static/products/cue1.jpg',
							name: '专业球杆',
							price: '880'
						},
						{
							image: '/static/products/cue2.jpg',
							name: '进口皮头',
							price: '120'
						}
					];

					this.otherProducts = [{
							image: '/static/products/other1.jpg',
							name: '台球灯',
							price: '680'
						},
						{
							image: '/static/products/other2.jpg',
							name: '计分器',
							price: '150'
						}
					];

					// 标记数据已加载
					this.dataLoaded = true;
					uni.hideLoading();
				}, 1000);
			}
		},

		mounted() {

			this.loadData();

		},
		onShow() {
			this.getCityTrades();
			this.getClothProducts();
			this.getSuppliesProducts();
			this.getCueProducts();
			this.getOtherProducts();

		},
		
	}
</script>

<style>
	.trade-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.trade-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.trade-title {
		font-size: 32rpx;
		font-weight: bold;
		flex: 1;
	}

	.trade-tag {
		display: flex;
		align-items: center;
	}

	.trade-tag text {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #ffaa00;
	}

	.trade-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.trade-info {
		display: block;
		font-size: 26rpx;
		color: #888;
		margin-bottom: 5rpx;
	}

	.trade-contact {
		display: block;
		font-size: 26rpx;
		color: #333;
		margin-top: 10rpx;
	}

	.trade-content-wrapper {
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
	}

	.trade-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.trade-info-container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.topbar {
		width: 100%;
		height: auto;
		background-color: #EEEEEE;
	}

	.empty-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		font-size: 28rpx;
		color: #999;
	}

	.filter-bar {
		display: flex;
		justify-content: space-around;
		padding: 15rpx 0;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.filter-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.icon-container {
		margin-left: 8rpx;
	}

	.arrow-icon {
		width: 20rpx;
		height: 20rpx;
	}

	.sort-arrows {
		display: flex;
		flex-direction: column;
		margin-left: 8rpx;
	}

	.sort-arrow {
		width: 20rpx;
		height: 20rpx;
	}

	.dropdown-menu {
		position: absolute;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.dropdown-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.check-icon {
		width: 20rpx;
		height: 20rpx;
	}


	.category-nav {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		background-color: #fff;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.category-item {
		font-size: 30rpx;
		padding: 2rpx 0;
		position: relative;
	}

	.category-item.active {
		color: #ffaa00;
		font-weight: bold;
	}

	.category-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #ffaa00;
	}


	.content-container {
		padding: 20rpx;
		background-color: #fff;
	}

	.service-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.service-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.service-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.service-tag {
		display: flex;
		align-items: center;
	}

	.service-tag text {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.service-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.service-city {
		display: block;
		font-size: 26rpx;
		color: #888;
		margin-bottom: 10rpx;
	}

	.service-stats {
		display: block;
		font-size: 24rpx;
		color: #999;
	}

	.price-filter {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #666;
	}


	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.product-item {
		width: 48%;
		margin-bottom: 20rpx;
		background-color: #f9f9f9;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.product-image {
		width: 100%;
		height: 300rpx;
	}

	.product-name {
		display: block;
		padding: 10rpx;
		font-size: 28rpx;
	}

	.product-price {
		display: block;
		padding: 0 10rpx 10rpx;
		font-size: 30rpx;
		color: #ff5500;
		font-weight: bold;
	}


	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		font-size: 28rpx;
		color: #999;
	}
</style>